<template>
	<eui-page-frame :topHeight="240">
		<template #top>
			<view class="page_header">
				<eui-nav-bar color="black" backgroundColor="white" titleWeight="bold" :title="param.bcName" />
				<eui-tab :tabs="tabData" :spaceLeft="spaceLeft" :value="tabIndex" :showBadge="false"
					style='padding-right:20rpx;padding-left:20rpx;border-radius: 0 0 10rpx 10rpx'
					@change="tabChange"></eui-tab>
			</view>
		</template>
		<eui-page-content>
			<view v-show="tabIndex == '0'" style="margin-top:0rpx;">
				<view style="
						display: flex;
						flex-direction: column;
						background-color: white;
						height:396rpx;
						width:710rpx;
						border-radius: 20rpx;
						margin-bottom: 16rpx;
						overflow: hidden;
					">
					<eui-base-card>
						<template #left>
							<image class="e-headerimage" :src="brandData.currentbrand.c_cover" mode="aspectFill" />
						</template>
						<view>
							<view style="font-size: 32rpx;font-family:'PingFang SC' sans-serif; font-weight: 600;
							color:#000000;height: 45rpx ;margin-top: 36rpx;text-align: left;">
								{{ brandData.currentbrand.c_name }}
							</view>
							<view style="margin-top: 8rpx; height: 37rpx;" class='regularFont'>
								{{ brandData.currentbrand.c_bcode }}
							</view>
							<view style="margin-top: 48rpx; height: 37rpx;">
								<span class="regularFont" style='margin-right:16rpx;'>业态</span>
								<span style="color: black;"
									class="regularFont">{{ brandData.currentbrand.c_ccode_name }}</span>
							</view>
						</view>
					</eui-base-card>
					<view
						style="display: flex; flex-direction: row; justify-content: space-around;margin-bottom: 20rpx;height:124rpx;width:100%;">
						<view
							style="display: flex; flex-direction: column;  font-size: 20rpx;height:124rpx;width:236.67rpx;padding-left: 28rpx;">
							<view style=" font-size: 20rpx;" class="font-color">
								<eui-uicons color="#00B9EE" size="26rpx" fontFamily="enjoyIcon5"
									customPrefix="icon-pinlei" />
								<span class='toptitle'
									style="line-height:30rpx;font-size: 22rpx;margin-left:2rpx">品类</span>
							</view>
							<view class="toptitle"
								style='margin-top: 12rpx;line-height:40rpx;font-size: 28rpx;color:#000000'>
								{{ brandData.currentbrand.c_ccode_name }}
							</view>
						</view>
						<eui-line direction="col" length='80rpx'></eui-line>
						<view
							style="display: flex; flex-direction: column;  font-size: 20rpx;height:124rpx;width:236.67rpx;padding-left: 28rpx">
							<view class="font-color">
								<eui-uicons color="#00B9EE" size="26rpx" fontFamily="enjoyIcon5"
									customPrefix="icon-pinpaidengji" />
								<span class='toptitle'
									style="line-height:30rpx;font-size: 22rpx;margin-left:2rpx">品牌等级</span>
							</view>
							<view class="toptitle"
								style='margin-top: 12rpx;line-height:40rpx;font-size: 28rpx;color:#000000'>
								{{ getDictName('品牌等级', brandData.currentbrand.c_class) }}
							</view>
						</view>
						<eui-line direction="col" length='80rpx'></eui-line>
						<view
							style="display: flex; flex-direction: column; font-size: 20rpx;height:124rpx;width:236.67rpx;padding-left: 28rpx">
							<view style="" class="font-color">
								<eui-uicons color="#00B9EE" size="26rpx" fontFamily="enjoyIcon5"
									customPrefix="icon-pinpaizhuangtai" />
								<span class='toptitle'
									style="line-height:30rpx;font-size: 22rpx;margin-left:2rpx">品牌状态</span>
							</view>
							<view class="toptitle"
								style='margin-top: 12rpx;line-height:40rpx;font-size: 28rpx;color:#000000'>
								{{ getDictName('品牌状态', brandData.currentbrand.c_status) }}
							</view>
						</view>
					</view>
				</view>
				<eui-base-card title="品牌详情" id='品牌详情' style='width:auto'>
					<eui-detail-show :items="brandDetailItem" labelWidth="70px"
						v-model="brandData.currentbrand"></eui-detail-show>
				</eui-base-card>
				<eui-base-card title="品牌标签">
					<view>
						<view v-if="brandData.brandtagslist.length > 0" v-for="(item, index) in brandData.brandtagslist"
							:key="index" style="display: flex; flex-direction: row;  margin-top: 10px">
							<view style="width: 90px; font-size: 14px; color: #777777">{{ item.c_label }}</view>
							<view style="display: flex; flex-wrap: wrap;">
								<view v-for="(ditem, dindex) in item.content" :key="dindex">
								<eui-tag v-if="ditem.c_selected" style="margin-bottom: 10px" :text="ditem.c_name"
									size="mini" shape="square" color="#02B7E6 " borderColor='#02B7E6' :plain="true"
									:plainFill="true"></eui-tag>
								<eui-tag v-if="!ditem.c_selected" style="margin-bottom: 10px" :text="ditem.c_name"
									size="mini" shape="square" :plain="true" color='#888888' borderColor='#999999'
									bgColor="#999999" :plainFill="true"></eui-tag>
							</view>
							</view>
						</view>
						<view v-else class="nodata">
							<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image" />
						</view>
					</view>
				</eui-base-card>
				<eui-base-card>
					<view>
						<view style="margin-top:28rpx;font-weight: bold;">品牌联系人</view>
						<view v-if="!!dataListLinker?.[0]?.c_title&&dataListLinker?.[0]?.c_title!=''">
							<!-- <eui-postcard style="width: 317rpx; height: 160rpx" keyId="1" top="0px" :dataList="dataListLinker" :options="optionlinker"
								:titleStyle="customTitleStyle" :contentStyle="customContentStyle">
								<template #icons>
									<view style="background: #00B9EE;width: 32rpx;height: 32rpx;border-radius: 32rpx;display: flex;align-items: center;justify-content: center;margin-right: 12rpx;">
										<eui-uicons color="#fff" size="18rpx" fontFamily="enjoyIcon5" customPrefix="icon-zhanghu1" />
									</view>
								</template>
							</eui-postcard> -->
							<view class='brand-post-card'>
								<view style="display: flex;align-items: center;"><view style="background: #00B9EE;width: 32rpx;height: 32rpx;border-radius: 32rpx;display: flex;align-items: center;justify-content: center;margin-right: 12rpx;">
									<eui-uicons color="#fff" size="18rpx" fontFamily="enjoyIcon5" customPrefix="icon-zhanghu1" />
								</view>
								<view style="font-size: 26rpx;font-weight: bold">{{dataListLinker?.[0]?.c_title}}</view></view>
								<view style="font-size: 20rpx;color: #666;margin: 8rpx 0;">{{dataListLinker?.[0]?.c_linker_tele}}</view>
								<view style="font-size: 20rpx;color: #666">{{dataListLinker?.[0]?.c_linker_address}}</view>
							</view>
						</view>
						<view v-else class="nodata">
							<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image" />
						</view>
					</view>
				</eui-base-card>
			</view>
			<view v-show="tabIndex == '1'" style="margin-top:0rpx;">
				<eui-base-card>
					<view>
						<eui-base-card title="当前合作商户" id='当前合作商户' style='width:auto'>
							<eui-detail-show :items="brandCompanyItem" labelWidth="70px"
								v-model="brandData.cooperationCompany"></eui-detail-show>
						</eui-base-card>
						<view v-if="!!providerLinker?.[0]?.c_title&&providerLinker?.[0]?.c_title!=''">
							<eui-postcard style="width: 600px; height: 180rpx" width="150px" keyId="2" height="60px"
								top="-10rpx" :dataList="providerLinker" :options="providerlinkerItem"
								:titleStyle="customTitleStyle" :contentStyle="customContentStyle">
								<template #icons>
									<eui-uicons style="margin-top: 2px" color="#00B9EE" size="20rpx"
										fontFamily="enjoyIcon5" customPrefix="icon-zhanghu1" />
								</template>
							</eui-postcard>
						</view>
					</view>
				</eui-base-card>

				<eui-base-card :title="`更多商户`">
					<view class="nodata">
						<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image" />
					</view>
					<!-- <eui-detail-show :items="brandCompanyItem" v-model="brandData.currentbrand"></eui-detail-show>
					<eui-base-card title=""></eui-base-card> -->
				</eui-base-card>
			</view>
			<view v-show="tabIndex == '2'" style="margin-top:0rpx;">
				<eui-base-card v-if="brandData.brandCounter.length>0" v-for="(item, index) in brandData.brandCounter"
					v-model="brandData.brandCounter" style='width:710rpx;height:264rpx;border-radius:20rpx;'
					:key="index" @click="openDetail(item)" title="">
					<template #left>
						<view class="e-attachment">
							<image class="e-attachment__image" :src="item.c_cover" mode="aspectFill" />
						</view>
					</template>
					<view class="e-titleName" style='margin-left:0rpx;margin-top:36rpx'>{{ item.c_name }}</view>
					<eui-detail-show :items="brandCounterItems" v-model="brandData.brandCounter[index]"
						labelWidth="40px" size="small" />
				</eui-base-card>
				<view v-else>
					<eui-base-card style='border-radius:20rpx;height:100%'>
						<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image"
							style='opacity:0.4;' />
					</eui-base-card>
				</view>
			</view>
		</eui-page-content>
	</eui-page-frame>
</template>
<script setup type="ts">
	import { ReactiveEffect, ref } from 'vue'
import dayjs from 'dayjs'
import { todayAdd, formatNow } from '@/hooks/useUtils';
import { getRelatedName,getUserDictName, getDictName, getDictList ,getStoreRelatedName} from '../components/RelatedName.js';
import { onShow, onLoad } from "@dcloudio/uni-app";
import useService from '@/hooks/useService';
const service = useService({ prefix: "apiApi" });

const tabData = ref([{ name: '品牌详情' }, { name: '厂家合作' }, { name: '品牌布点' }]);
const tabIndex = ref(0);
const moreCount = ref(0);
const tabChange = (e) => {
	tabIndex.value = e;
}
const spaceLeft = ref(3);

const param = ref({bcode:'',bcName:''})
onLoad(({c_bcode,c_bccode_name}) => {
		param.value ={
			bcode:c_bcode,
			bcName:c_bccode_name
		}
		GetBrandDetail();})


const  dataListLinker  =ref([{
	c_title:'',
	c_linker_tele:'',
	c_linker_address:''
}])
const optionlinker = ref([
				{label:'', name:'c_title'},
				 { label:'', name: 'c_linker_tele' },
                { label:'', name: 'c_linker_address' }])

const providerLinker = ref([{
	c_title:'',
	c_link_man:'',
	c_link_tele:''
}]);
const providerlinkerItem =ref([
	{label:'',name:'c_title'},
	{label:'',name:'c_link_man_title'},
	{label:'',name:'c_link_tele'}])

const brandList = ref([{brandName:'品牌名1'},{brandName:'品牌名2'}]);
//品牌数据
const brandData = ref({
	currentbrand:{
		c_manufactory:'',
		c_birthland:'',
		c_introduce_dt:'',
		c_mk_store_name:'',
		c_estate_cond_name:'',
		c_intro:'',
		c_cover:''
	},
	brandtagslist:[],
	brandtaglist:{
		peoplegroup:[],
		sexdata:[],
		pricedata:[]
	},
	linkerList:[],
	cooperationCompany:{
		c_provider_name:'',
		c_address:'',
		c_category_name:'',
		c_global_no:'',
		c_con_no:'',
		c_st_en_dt:'',
		c_counter_name:''
	},
	brandCounter:[]
});
//获取品牌明细数据
const GetBrandDetail = async()=>{
	const req = {
		WhereList: [],
		BillId:param.value.bcode
	}
	uni.showLoading({ title: "查询中...", mask: true });
	const data = await service.request('管易通品牌查询', 'EnjoyBillQuery', req);
	uni.hideLoading();
	if (data?.ds.length>0) {
		brandData.value.currentbrand={};
		brandData.value.currentbrand={
				...data.ds[0],
				c_manufactory:data.ds[0]?.c_manufactory??'',
				c_birthland:data.ds[0].c_birthland??'',
				c_introduce_dt:data.ds[0].c_introduce_dt??'',
				c_estate_cond_name:data.ds[0].c_estate_cond_name??'',
				c_intro:data.ds[0].c_intro??'',
				c_mk_store_name:data.ds[0]?.c_mk_store_id? getStoreRelatedName(data.ds[0]?.c_mk_store_id):'',
				c_cover:data.ds[0].c_logo_pic? (service.getBaseUrl() + '/File/DownLoadFile/' + data.ds[0].c_logo_pic) : ('../../../static/img/no_image.png')
		}
	dataListLinker.value=[];
	dataListLinker.value =data.ds.map(x=>{
		return {
				c_title:x.c_linker,
				c_linker_tele:x.c_linker_tele,
				c_linker_address:x.c_linker_address
		}
	});
	
	brandData.value.brandtagslist = data.ds4.map(x=>{
		 let sumtag = ( x.c_contains_tagname.split(',')??[])?.map(y=>{
			 if(x?.c_selected_name.includes(y))
			 {
				 return {
				 	c_id:y,
				 	c_name:y,
					c_selected:true
				 }
			 }
			 else
			 {
				 return {
					 c_id:y,
					 c_name:y,
					 c_selected:false
				 }
			 }
		 })
		 let retArray= {
			 c_label:x.c_pname,
			 content:sumtag
		 }
		 return retArray;
	})
	brandData.value.cooperationCompany ={};
	let itemCompany = data.ds2?.[0];
		brandData.value.cooperationCompany ={
			c_provider_name:itemCompany?.c_provider_name,
			c_address:itemCompany?.c_address,
			c_global_no:itemCompany?.c_global_no,
			c_con_no:itemCompany?.c_con_no,
			c_counter_name:itemCompany?.c_counter_name,
			c_category_name:getUserDictName('供应商类别',itemCompany.c_category),
			c_st_en_dt: `${itemCompany?.c_st_dt? dayjs(itemCompany?.c_st_dt)?.format('YYYY-MM-DD'): '' }${ itemCompany?.c_en_dt? '至' + dayjs(itemCompany?.c_en_dt)?.format('YYYY-MM-DD'):''}`
		}
		
		
		providerLinker.value  =[];
		providerLinker.value.push({
			c_title:data?.ds2[0]?.c_link_man,
			c_link_man_title:data?.ds2[0]?.c_link_man_title,
			c_link_tele:data?.ds2[0]?.c_link_tele
		});
		
		brandData.value.brandCounter = data.ds3?.map(x=>{
			return {
				...x,
				c_st_en_dt:`${dayjs(x?.c_st_dt)?.format('YYYY-MM-DD')} 至 ${dayjs(x?.c_en_dt)?.format('YYYY-MM-DD')}`,
				c_cover:x.c_pic_guid ? (service.getBaseUrl() + '/File/DownLoadFile/' + x.c_pic_guid) : ('../../../static/img/homeImgs/notfound.png'),
				c_modify_dt_format:`${dayjs(x.c_modify_dt).format('YYYY-MM-DD')}`,
				c_building_floor:x.c_building_name+' '+x.c_floor_name,
				c_con_type_name:getDictName('经营方式',x.c_con_type)
			}
		})
	}
}


const customTitleStyle = {
	fontSize:'26rpx',
	fontWeight:'bold'
}
const customContentStyle = {
	fontSize:'20rpx'
}

const brandDetailItem  = [
		{
			label: "厂商名称",
			prop: "c_manufactory",
			type: "text",
			colSpan: 24,
		},
		{
			label: "属地",
			prop: "c_birthland",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "引入日期",
			prop: "c_introduce_dt",
			type: "text",
			colSpan: 12,
			element: {
				mode: "YYYY-MM-DD",
			},
		},
		{
			label: "引入机构",
			prop: "c_mk_store_name",
			type: "text",
			colSpan: 24,
		},
		{
			label: "物业条件",
			prop: "c_estate_cond_name",
			type: "tag",
			colSpan: 24,
			element: {
				size: "mini",
				shape: "square",
				plain: true,
				plainFill:true,
				color:"#02B7E6 " ,
				borderColor:'#02B7E6' 
			}
		},
		{
			label: "品牌简介",
			prop: "c_intro",
			type: "text",
			colSpan: 24,
			rowSpan:2
		}
	]

//厂家合作
const brandCompanyItem  = [
		{
			label: "商户名称",
			prop: "c_provider_name",
			type: "text",
			colSpan: 24,
		},
		{
			label: "属地",
			prop: "c_address",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "商户类别",
			prop: "c_category_name",
			type: "text",
			colSpan: 12,
			element: {
			},
		},
		{
			label: "国家统一编码",
			prop: "c_global_no",
			type: "text",
			colSpan: 24,
		},
		{
			label: "合同编号",
			prop: "c_con_no",
			type: "text",
			colSpan: 24,
			element: {
			}
		},
		{
			label: "合作期间",
			prop: "c_st_en_dt",
			type: "text",
			colSpan: 24,
			rowSpan:2
		},
		{
			label: "签约位",
			prop: "c_counter_name",
			type: "text",
			colSpan: 24,
			rowSpan:2
		}
	]
//品牌标签
const brandTagItem =[
	{
		label: "品牌人群",
		prop: "c_crowd",
		type: "tag",
		colSpan: 24,
		element:{
			size: "mini",
			shape: "square",
			color:'#45C5E4',
			plain: true,
			plainFill:true,
		}
	},
	{
		label: "适用性别",
		prop: "c_style",
		type: "text",
		colSpan: 24,
	},
	{
		label: "价格带",
		prop: "c_manufactory",
		type: "text",
		colSpan: 24,
	},
]

const brandCounterItems = [
	{
		label: "项目所属地",
		prop: "c_location",
		type: "text",
		colSpan: 24
	},
	{
		label: "楼层位置",
		prop: "c_building_floor",
		type: "text",
		colSpan: 24
	},
	{
		label: "面积",
		prop: "c_use_area",
		type: "text",
		colSpan: 12,
	},
	{
		label: "合作方式",
		prop: "c_con_type_name",
		type: "text",
		colSpan: 12,
	},
	{
		label: "登记日期",
		prop: "c_modify_dt_format",
		type: "text",
		colSpan: 24,
	},
]
</script>

<style lang="scss">
	@import '../../../static/font/enjoyicon5.0/iconfont.css';


	.e-titleName {
		font-size: 32rpx;
		font-family: 'PingFang SC', sans-serif;
		font-weight: 600;
		height: 45rpx;
		width: 100%;
		overflow: hidden;
	}

	.e-headerimage {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin: 28rpx 8rpx 28rpx 28rpx;
	}

	.regularFont {
		font-size: 26rpx;
		text-align: left;
		line-height: 37rpx;
		color: #888888;
		font-family: 'PingFang SC' sans-serif;
		font-weight: 400;
	}

	.toptitle {
		font-family: 'PingFang SC', sans-serif;
		font-weight: 400;
		color: #888888;
	}

	::v-deep .euitab {
		border-radius: 0rpx !important
	}

	.nodata {
		width: 100%;
		height: 400rpx;

		image {
			width: 100%;
			height: 80%;
			opacity: 0.4;
		}
	}

	.page_header {
		width: 100%;
		// height: 230rpx;
		background-color: white;
	}

	.icons-pinlei {
		background-image: url(../../../static/img/rdsImgs/icon_pinlei.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 25rpx;
		height: 25rpx;
	}

	.icons-dengji {
		background-image: url(../../../static/img/rdsImgs/icon_dengji.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 25rpx;
		height: 25rpx;
	}

	.icons-state {
		background-image: url(../../../static/img/rdsImgs/icon_state.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 25rpx;
		height: 25rpx;
	}

	.card {
		border-radius: 16rpx;
		background-color: #ffffff;
	}

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #f2f2f2;
		padding: 0px !important;
	}

	.content-img {
		background-image: url(../../../static/img/rdsImgs/top_zpp_blue.jpg);
		background-size: 100% 420rpx;
		background-repeat: no-repeat;
		width: 420rpx;
	}

	.brand-post-card{
		background-image: url(../../../static/img/rdsImgs/zpp_name_blue.png);
		background-size: 100% 159rpx;
		background-repeat: no-repeat;
		width: 317rpx;
		padding: 20rpx;
		// margin-left: 20rpx;
		margin-top: 28rpx;
	}

	// .dropdownsearch_header {
	// 	margin-top: -40px;
	// 	width: auto;
	// 	height: 35pt;
	// 	background-color: #f5faff;
	// 	border-radius: 10pt 10pt 0pt 0pt;
	// }

	.e-basecard {
		display: flex;
		flex-direction: row;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.e-content {
		margin-top: 10rpx;
	}

	.e-iconstext {
		display: flex;
		flex-direction: row;
		margin-top: 10rpx;
	}

	.e-tagName {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.e-tag_abc_state {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		flex-wrap: wrap;
	}

	.e-attachment {
		align-items: center;
		justify-content: center;
		display: flex;
		margin-left: 28rpx;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		margin-right: 28rpx;

		&__image {
			width: 240rpx;
			height: 240rpx;
			border-radius: 10rpx;
		}
	}

	.font-color {
		color: $uni-text-color-grey;
	}
</style>